<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <title>管理系统</title>
    <meta name="description" content=""/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/font-awesome/4.5.0/css/font-awesome.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/fonts.googleapis.com.css}"/>
    <link rel="stylesheet" th:href="@{/css/ace.min.css}" class="ace-main-stylesheet" id="main-ace-style"/>
    <link rel="stylesheet" th:href="@{/css/ace-part2.min.css}" class="ace-main-stylesheet"/>
    <link rel="stylesheet" th:href="@{/css/ace-skins.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/ace-rtl.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/ace-ie.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/jquery-ui.custom.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/chosen.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/bootstrap-colorpicker.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/dataTables.bootstrap4.min.css}"/>
    <script th:src="@{/js/ace-extra.min.js}"></script>
    <script th:src="@{/js/html5shiv.min.js}"></script>
    <script th:src="@{/js/respond.min.js}"></script>
</head>

<body class="no-skin">
<!--头导航栏-->
<div th:replace="common/bar::#navbar"></div>
<div class="main-container ace-save-state" id="main-container">
    <script type="text/javascript">
        try {
            ace.settings.loadState('main-container')
        } catch (e) {
        }
    </script>
    <!-- 侧导航栏 -->
    <div th:replace="common/bar::#sidebar"></div>

    <div class="main-content">
        <div class="main-content-inner">
            <div class="breadcrumbs ace-save-state" id="breadcrumbs">
                <ul class="breadcrumb">
                    <li>
                        <i class="ace-icon fa fa-home home-icon"></i>
                        <a href="#">sys</a>
                    </li>
                    <li class="active">index</li>
                </ul><!-- /.breadcrumb -->
            </div>
            <div class="page-content">
                <div class="row">
                    <div class="col-xs-12 col-sm-4">
                        <div class="widget-box">
                            <div class="widget-header">
                                <h4 class="widget-title">添加用户</h4>
                            </div>
                            <div class="widget-body">
                                <div class="widget-main no-padding">
                                    <form>
                                        <fieldset>
                                            <div class="row">
                                                <div class="col-xs-12 col-sm-4">
                                                    <label>选择角色：</label>
                                                </div>
                                                <div class="col-xs-12 col-sm-8">
                                                    <select class="form-control" id="roleId">
                                                        <option value="4">普通用户</option>
                                                        <option value="3">审核员</option>
                                                        <option value="2">签发员</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="row">
                                                <div class="col-xs-12 col-sm-4">
                                                    <label>真实姓名：</label>
                                                </div>
                                                <div class="col-xs-12 col-sm-8">
                                                    <input class="submit_content form-control" type="text"
                                                           id="holder">
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="row">
                                                <div class="col-xs-12 col-sm-4">
                                                    <label>登录账号：</label>
                                                </div>
                                                <div class="col-xs-12 col-sm-8">
                                                    <input class="submit_content form-control" type="text"
                                                           id="loginName">
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="row">
                                                <div class="col-xs-12 col-sm-4">
                                                    <label>登录密码：</label>
                                                </div>
                                                <div class="col-xs-12 col-sm-8">
                                                    <input class="submit_content form-control" type="text"
                                                           id="password">
                                                </div>
                                            </div>
                                            <hr>
                                        </fieldset>
                                        <div class="form-actions center">
                                            <button type="button" class="btn btn-sm btn-success"
                                                    onclick="addUser()">
                                                添加
                                                <i class="ace-icon fa fa-arrow-right icon-on-right bigger-110"></i>
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-8">
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover text-nowrap" id="dateTable"
                                   cellspacing="0">
                                <thead>
                                <tr>
                                    <th>用户id</th>
                                    <th>真实姓名</th>
                                    <th>登录账号</th>
                                    <th>登录密码</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div><!-- /.page-content -->
        </div>
    </div><!-- /.main-content -->

    <div class="footer">
        <div class="footer-inner">
            <div class="footer-content">
                <span class="bigger-120">
                    <span class="blue bolder">Ace</span>
                    管理系统 &copy; 2020
                </span>
            </div>
        </div>
    </div>

    <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
        <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
    </a>
</div><!-- /.main-container -->

<script th:src="@{/js/jquery-2.1.4.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/bootstrap-colorpicker.min.js}"></script>
<script th:src="@{/js/jquery.maskedinput.min.js}"></script>
<script th:src="@{/js/ace-elements.min.js}"></script>
<script th:src="@{/js/ace.min.js}"></script>
<script th:src="@{/js/chosen.jquery.min.js}"></script>
<script th:src="@{/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/js/dataTables.bootstrap4.min.js}"></script>
<script th:src="@{/custom/common.js}"></script>
</body>
<script>
    function addUser() {
        if (confirm("确认添加？")) {
            var data = JSON.stringify({
                "holder": $("#holder").val(), "loginName": $("#loginName").val()
                , "password": $("#password").val(), "roleId": $("#roleId").val()
            });
            $.ajax({
                method: "post",
                url: "/admin/addUser",
                contentType: "application/json;charset=utf-8",
                data: data,
                success: function (res) {
                    $("#password").val("");
                    $("#loginName").val("");
                    $("#holder").val("");
                    $("#roleId").val(4);
                    $("#dateTable").DataTable().ajax.reload();
                }
            });
        }
    }
    var columns = [
        {"data": "userId", visible: false},
        {"data": "holder"},
        {"data": "loginName"},
        {"data": "password"},
        {
            "data": "createTime",
            render: function (data, type, full) {
                if(data == undefined){
                    return "";
                }
                return new Date(data).toLocaleDateString();
            }
        },
        {
            render: function (data, type, full) {
                return "<button onclick='user_remove(" + full.userId + ");'  class='btn btn-danger btn-sm'> 删除</button>";
            },
        }
    ];
    $(function () {
        load_table("/admin/getAllUser", columns);
    });
    function user_remove(userId) {
        if (confirm("确认删除？")) {
            $.ajax({
                method:"post",
                url:"/admin/removeUser?userId="+userId,
                success:function (res) {
                    alert(res.message);
                    $("#dateTable").DataTable().ajax.reload();
                }
            })
        }
    }
</script>
</html>
